A List-detail 列表-詳情佈局
許多佈局可以基於列表和詳細檢視的關係來建立
- 訊息列表 + 對話詳情
- 檔案瀏覽器 + 資料夾內容
- 音樂藝術家 + 專輯詳情
- 設定 + 分類詳情
- 電子郵件收件箱 + 選定郵件
Usage 使用方式
列表-詳情檢視適用於可瀏覽內容並快速檢視詳情的場景。
Dividing space 空間劃分
該佈局包含兩部分：
- 列表區域（List area）：顯示可瀏覽的專案列表。
- 詳情區域（Detail area）：顯示選定專案的詳細資訊。
不同視窗尺寸下的適配
| 視窗大小（dp） | 可見面板 |
| 緊湊（0-599） | 1 個面板 |
| 中等（600-839） | 1 個（推薦）或 2 個面板 |
| 擴充套件（840+） | 2 個面板 |
| 大（1200-1599） | 2 個面板 |
| 超大（1600+） | 2 個面板 |
Across window size classes 跨視窗尺寸佈局指南
A 緊湊佈局：在豎屏手機、摺疊屏閉合和平板分屏模式下，僅顯示單個檢視（列表或詳情）
B 中等佈局（Medium）摺疊屏展開、豎屏平板。
使用單面板佈局處理複雜資訊和長互動
需要快速互動時可選擇雙面板佈局，中等尺寸下搭配底部導航或模態抽屜時應避免過窄面板
C 擴充套件、大屏和超大屏佈局橫屏手機、橫屏平板，使用雙面板佈局
Behavior 行為
- 返回按鈕：僅在單面板佈局的詳情檢視中可見。
- 選中狀態：僅在雙面板佈局的列表檢視中顯示。
- 視覺焦點：在雙面板佈局中，使用顯式或隱式分組來引導使用者注意力。
佈局切換（Transitioning Between Layouts）
視窗大小是動態變化的，比如旋轉或展開裝置，或者進入多視窗模式。
如果展開之前沒有選擇列表任何專案，那麼詳細資訊面板會顯示一個空白的佔位狀態
但如果展開式選中了某個專案，那麼展開的面板會顯示該專案的詳細檢視
摺疊屏關閉後，若未選中任何內容，則回到僅顯示列表的單卡片模式。
即使選擇到其他列表後，詳情資訊檢視的滾動位置也會保留